/**
 * @Author:周邱艳
 * @Date:20200615
 * @Describle:这是组合详情页
 */

import React, { Component } from "react";
import {Card} from "antd";
import ReactEcharts from "echarts-for-react";
import axios from "axios";
import {URL} from '../../../index'

export default class PortfolioDetailMiddleFirst extends Component{
    //返回柱状图的配置对象
    constructor(props) {
        super(props);
        this.state={
            products:[],//总表
            names:[],//数据
            uptitle:[]//表名
        }
        this.getCategorys=this.getCategorys.bind(this)
    }
    getCategorys = () => {
        //数据请求
        axios({
            method:"GET",
            url:URL+"/proYields/proYieldByCombinationId",
            params:{comBaseId:this.props.portfolioId}
        }).then(
            (res) => {
                //状态码判断
                if(res.data.code===200){
                    var names = [];//初始化数据
                    var uptitle=[]//初始化小标识名
                    for (let i=0;i<res.data.products.length;i++){
                        var name=res.data.products[i]["proName"]
                        var value=res.data.products[i]["comShareRadio"]
                        //数据合成
                        names.push({value,name})
                        //标识名合成
                        uptitle.push(name)
                    }
                    //数据更新
                    this.setState({
                        products: this.state.products.concat(res.data.products),
                        names:names,
                        uptitle:uptitle
                    })
                    //状态码判断
                }else if(res.data.code === 500){
                    this.props.history.push('/serverError')
                }

            }
        ).catch(function (error) {//异常处理
            console.log(error);
        })
    }
    //组件挂载后
    componentDidMount() {
        this.getCategorys()
    }
    //echarts可视化
    getOption1=()=>{
        return{
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: this.state.uptitle//小标识名
            },
            series: [
                {
                    name: '产品名字',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: this.state.names//数据

                }
            ]
        };

    }
    //数据渲染
    render() {

        return(
            <div style={{width:"50%",height:"50%"}}>
                <Card title='组合产品占比情况'>
                    <ReactEcharts option={this.getOption1()} style={{height: 400}}/>
                </Card>
            </div>
        )
    }
}
